EP 05 - Avalonia UI 的 F12 開發人員工具與其 DRM 介紹 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 5

Software Development

就是要來點 A.I. 的 TopAOAIConnector App系列第 5 篇

EP 05 - Avalonia UI 的 F12 開發人員工具與其 DRM 介紹

16th鐵人賽 a.i. avalonia ui

James Tsai

2024-09-18 00:07:03

137 瀏覽

分享至

Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的桌面應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP05。

由於 Avalonia UI 範本所建立的專案，是套用舊式的 namespace 寫法風格，整體看起來就覺得怪怪的，所以修改了整個專案所有的 C# 檔案(副檔名為 .cs)當中所寫的 namespace 方式為 "file-scoped-namespaces"。

基本上在 Visual Studio 的 IDE 當中看 C# 程式時，只要找到 namespace 的宣告並在後面直接打上 ";"，剩下的 Visual Studio 就會幫忙處理好。

改變前：
01-1

改變後：
01-2

再針對專案當中的其他 C# 檔案都做類似的處理即可。

另外，再觀察一下此專案的專案檔：

會看到一個很特別的 PackageReference 叫做 "Avalonia.Diagnostics"，而且在此 PackageReference 特別有設定編譯時的 Condition ~~(懂的人都懂)~~ 跟在上一列有特別做註解說明。

那此 Avalonia.Diagnostics 是要做什麼的呢？可以參考一下 Avalonia UI 官方文件說明：

如果曾經開發過網頁的話，應該都知道現代的瀏覽器 "F12 開發人員工具" 的功能，此 "Avalonia.Diagnostics" 就有如此的味道，甚至操作方式也直接按 "F12"。

所以當把此專案偵錯執行起來的時候，可以直接按鍵盤的 "F12" ：

就會叫出這個 "Avalonia.Diagnostics"，協助觀察 UI 上的設計狀況 (分成 Logical Tree、Visual Tree、Event 三個分頁籤)：

Logical Tree：
05-1

Visual Tree：
05-2

Event：
05-3

這功能對於 UI 在設計處理上找問題時真的很便利，後面有機會再談囉！(應該...有機會吧！？)

接著來調整一下此 Avalonia UI 專案的基礎設計了。

打開專案的 Program.cs 會看到 AppBuilder 等處理，在這邊要先關心的是 Main 方法的撰寫(紅框區域)：

雖然這樣寫在 傳統桌面 應用程式的顯示上沒有什麼問題，但如果遇到無 Window (此為 "視窗")概念的 OS 平台，例如: Raspberry Pi OS (原稱 Raspbian) 當中的 Lite 版...等，要執行此 Avalonia UI 專案的程式時，那就會有問題喔！

所以會建議參考 Avalonia UI 官網文件的 Running on Raspberry Pi with Raspbian Lite 改寫與調整：https://docs.avaloniaui.net/docs/guides/platforms/rpi/running-on-raspbian-lite-via-drm

Avalonia UI 官網的例子展示了使用 DRM 作法呈現了 UI，可能有看倌覺得只有一個畫面所以透過 DRM 來顯示才沒問題，這樣想的看倌就錯了喔！

只要能設計與使用的恰當，就算在 DRM 下沒有透過 Window 來處理時，也幾乎 100% 可以完成媲美 Window 效果的 Client 端應用程式喔！

那為什麼要捨棄方便的 Window 特別跑 DRM 呢？

那這就是另外的考量與故事了...🫠🫠🫠

還是回過頭來還是專心在 TopAOAIConnector App 的設計吧！

若是希望在主畫面上有個類似 Menu 來切換與分隔畫面的效果，就來透過 MainWindow 並找到其 TextBlock 的部分：
07-1

置換成下列 XAML 標記碼：

<SplitView CompactPaneLength="50" DisplayMode="CompactInline" IsPaneOpen="True" OpenPaneLength="300">
    <SplitView.Pane>
        <StackPanel Margin="6" Spacing="6">
            <Button>-</Button>
            <ListBox>
                <ListBoxItem>Avalonia</ListBoxItem>
                <ListBoxItem>DotNET</ListBoxItem>
                <ListBoxItem>CSharp</ListBoxItem>
            </ListBox>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Greeting}" />
    </SplitView.Content>
</SplitView>

結果如下：
07-2